<template>
    <layout>
      <div class="container">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item  :to="{ path: '/pages/article/index' }"><a>作品列表</a></el-breadcrumb-item>
        <el-breadcrumb-item><a>{{id?'修改作品':'添加作品'}}</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="form">
        <el-form-item label="创建时间" v-if="id" prop="create_time">
          <view>{{ parseTime(form.create_time) }}</view>
        </el-form-item>
        <el-form-item label="类别" prop="table">
          <el-select v-model="table" value-key="" placeholder="请选择类别" :disabled="id" filterable @change="">
            <el-option v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="更新时间" v-if="form.update_time" prop="create_time">
          <view>{{ parseTime(form.update_time) }}</view>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
      </div>
    </layout>
</template>

<script>
import layout from '@/layout/index.vue'	
export default {
  components: {layout},
    data () {
        return {
          id:'',
          table:'note',
          tableName:'',
          typeList:[
            {label:'心情随笔',value:'note'},
            {label:'韶华追忆',value:'memory'},
            {label:'个人作品',value:'works'},
          ],
          form:{
            table:'',
            title:"",
            content:"",
            },
            rules: {
              table: [
                { required: true, message: '请输选择类别', trigger: 'blur' },
              ],
              title: [
                { required: true, message: '请输入标题', trigger: 'blur' },
              ],
            }
        };
    },
    onLoad (options) {
      if(options){
        this.id = options.id
        this.table = options.table
        this.getdDetail()
      }
    },
    methods: {
      // 详情
     getdDetail(){
      const data={
				id:this.id,
				table:this.table,
			}
			console.log(('data',data))
      this.$Ajax('getDetail',data,res=>{
      	console.log(res.data)
      	 this.form = res.data
         this.form.table = this.table
      })
    },
    getType(){
      const index = this.typeList.findIndex(item=>item.value==this.form.table)
      console.log('index',index)
      if(index > -1){
        this.tableName = this.typeList[index].label
      }else{
        this.tableName = ''
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data={
            table:this.table,
            title:this.form.title,
            content:this.form.content,
          }
          if(this.id){
            data['id'] = this.id
          }
          console.log('data',data)
          uni.showLoading({
            title: '提交中',
            mask: true
          });
          this.$Ajax('addArticle', data, res => {
            uni.hideLoading();
            if (res.code == 200) {
              let msg = this.id?'修改成功':'添加成功'
              this.$tools.toastJump(msg,'./index')
            } else {
              this.$tools.toast(res.message)
            }
          },err=>{
            uni.hideLoading();
            console.log('err',err)
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.container{
  max-width: 1000px;
  margin: 20px auto;
}
.form{
	width: 375px;
  max-width: 80%;
  margin: 20px auto;
}
</style>
